<template>
  <div class="chart-box">
    <div id="chart-3" style="height: 500px"></div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  data() {
    return {
      start: null,
      end: null,
      data: [],
      chartPie: null,
    };
  },
  created() {
    this.axios({
      url: "grad/yearList",
      methods: "get",
    }).then((res) => {
      let years = res.data.data;

      years = years.sort(function (a, b) {
        return a - b;
      });

      //默认为最近一年
      this.start = years[years.length - 1];
      this.end = years[years.length - 1];

      this.initData();
    });
  },

  mounted() { },
  computed: {
    myChart() {
      return echarts.init(document.getElementById("chart-3"));
    },
  },
  methods: {
    count_kind(data) {
      let computer = 0; //计算机
      let economy = 0; //金融
      let orgnize = 0; //管理
      let study = 0; //科学研究
      let build = 0; //制造业
      let electric = 0; //电力
      let educate = 0; //教育
      let health = 0; //卫生
      let transport = 0; //交通运输
      let service = 0; //服务
      let building = 0; //房地产
      let culture = 0; //文化
      let army = 0; //军队
      let other = 0;
      let sum = 0;
      for (let i in data) {
        let cur = data[i]["term"];
        let num = data[i]["num"];
        if (cur == "信息传输、软件和信息技术服务业") {
          computer += num;
        } else if (cur == "金融业") {
          economy += num;
        } else if (cur == "公共管理、社会保障和社会组织") {
          orgnize += num;
        } else if (cur == "科学研究和技术服务业") {
          study += num;
        } else if (cur == "制造业") {
          build += num;
        } else if (cur == "电力、热力、燃气及水生产和供应业") {
          electric += num;
        } else if (cur == "教育") {
          educate += num;
        } else if (cur == "卫生和社会工作") {
          health += num;
        } else if (cur == "交通运输、仓储和邮政业") {
          transport += num;
        } else if (cur == "租赁和商务服务业") {
          health += num;
        } else if (cur == "房地产业") {
          building += num;
        } else if (cur == "文化、体育和娱乐业") {
          culture += num;
        } else if (cur == "军队") {
          army += num;
        } else {
          other += num;
        }
        sum += num;
      }
      // 按照需求排序 big_term term num
      return [
        computer,
        economy,
        orgnize,
        study,
        build,
        electric,
        educate,
        health,
        transport,
        health,
        building,
        culture,
        army,
        other,
      ];
    },
    //初始化数据
    initData() {
      this.axios({
        url: "grad/org_industry",
        method: "get",
        params: {
          start: this.start,
          end: this.end,
        },
      })
        .then((res) => {
          let bachelor = this.count_kind(res.data.data.bachelor);
          let master = this.count_kind(res.data.data.master);

          //  调整成输出格式
          // console.log(bachelor)
          // console.log(master)
          let industrys = [
            "信息传输、软件和信息技术服务业",
            "金融业",
            "公共管理、社会保障和社会组织",
            "科学研究和技术服务业",
            "制造业",
            "电力、热力、燃气及水生产和供应业",
            "教育",
            "卫生和社会工作",
            "交通运输、仓储和邮政业",
            "租赁和商务服务业",
            "房地产业",
            "文化、体育和娱乐业",
            "军队",
            "其他",
          ];

          let chardata = [];
          for (let i = 1; i < industrys.length; i++) {
            let temp = {};
            temp.name = industrys[i];
            temp.value = bachelor[i] + master[i];
            chardata.push(temp);
          }

          let temp = {};
          temp.name = industrys[0];
          temp.value = bachelor[0] + master[0];
          chardata.push(temp);
          // console.log(chardata)
          this.data = chardata;
          this.drawChart();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    drawChart() {
      // console.log(this.start);
      let mytextStyle = {
        color: "#333",
        fontSize: 20,
      };
      let mylabel = {
        show: false,
        // position: "insideTop",
        offset: [30, 40],
        // formatter: "{b} : {c} ({d}%)",
        textStyle: mytextStyle,
      };
      echarts.init(document.getElementById("chart-3"), "macarons").dispose();
      this.chartPie = echarts.init(
        document.getElementById("chart-3"),
        "macarons"
      );
      let that = this;
      this.chartPie.setOption({
        title: {
          text: this.start + "届签协议和合同就业毕业生的单位行业分布",
          x: "center",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontWeight: "bold",
            color: "#474747",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
          textStyle: {
            color: "white",//设置文字颜色
          },
        },
        // label:{

        // },
        legend: {
          data: [
            "金融业",
            "公共管理、社会保障和社会组织",
            "科学研究和技术服务业",
            "制造业",
            "电力、热力、燃气及水生产和供应业",
            "教育",
            "卫生和社会工作",
            "交通运输、仓储和邮政业",
            "租赁和商务服务业",
            "房地产业",
            "文化、体育和娱乐业",
            "军队",
            "其他",
            "信息传输、软件和信息技术服务业",
          ],
          left: "center",
          top: "bottom",
          orient: "horizontal",
        },
        series: [
          {
            name: "单位行业分布",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "50%"],
            data: that.data,
            animationEasing: "cubicInOut",
            animationDuration: 2600,
            label: {
              emphasis: mylabel,
            },
          },
        ],
      });
    },
    resize() {
      this.myChart.resize();
    },
  },
};
</script>

<style scoped>
.chart-box {
  height: 100%;
  width: 100%;
  padding: 10px;
  margin: 0 auto;
  margin-bottom: 10px;
  margin-top: 10px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
}

.chart-box :hover {
  cursor: pointer;
}
</style>
